<template>
  <div class="search-component">
    <!-- 重新设计的搜索区域 -->
    <div class="modern-search-container">
      <!-- 主搜索行 -->
      <div class="main-search-row">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索您的文件..."
          class="modern-search-input"
          size="large"
          clearable
          @input="handleSearchInput"
          @clear="handleClear"
          @keyup.enter="performSearch"
        >
          <template #prefix>
            <el-icon class="search-prefix-icon">
              <Search />
            </el-icon>
          </template>
        </el-input>
        
        <!-- 紧凑型文件类型筛选 -->
        <el-select 
          v-model="selectedType" 
          @change="handleTypeChange"
          class="compact-type-select"
          placeholder="类型"
          size="large"
        >
          <el-option
            v-for="option in fileTypeOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        
        <!-- 搜索范围（仅在搜索时显示） -->
        <el-select 
          v-if="searchKeyword.trim()"
          v-model="searchType" 
          @change="handleSearchTypeChange"
          class="compact-scope-select"
          placeholder="范围"
          size="large"
        >
          <el-option label="全部" value="all" />
          <el-option label="文件名" value="name" />
          <el-option label="路径" value="path" />
        </el-select>
      </div>
    </div>

    <!-- 搜索统计信息已整合到文件列表标题，保留"搜索中"提示 -->
    <div v-if="isSearching" class="search-stats">
      <el-text type="info">
        <el-icon class="loading-icon"><Loading /></el-icon>
        正在搜索中...
      </el-text>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search, RefreshLeft, Loading, ArrowDown } from '@element-plus/icons-vue'
import { debounce, validateSearchKeyword, getFileTypeOptions } from '../utils/fileUtils'

// 组件接口定义
const emit = defineEmits(['search', 'clear'])

// 响应式数据
const searchKeyword = ref('')           // 搜索关键词
const selectedType = ref('all')         // 选中的文件类型
const searchType = ref('all')           // 搜索类型
const isSearching = ref(false)          // 是否正在搜索
const searchResults = ref([])           // 搜索结果
const lastSearchKeyword = ref('')       // 上次搜索的关键词

// 文件类型选项
const fileTypeOptions = getFileTypeOptions()

// 计算属性
const hasResults = computed(() => searchResults.value.length > 0)

// 防抖搜索处理
const debouncedSearch = debounce(performSearch, 300)

/**
 * 处理搜索输入
 */
function handleSearchInput() {
  // 如果输入为空，清除结果
  if (!searchKeyword.value.trim()) {
    handleClear()
    return
  }
  
  // 防抖搜索
  debouncedSearch()
}

/**
 * 执行搜索
 */
async function performSearch() {
  const keyword = searchKeyword.value.trim()
  
  // 验证搜索关键词
  const validation = validateSearchKeyword(keyword)
  if (!validation.isValid) {
    ElMessage.warning(validation.message)
    return
  }
  
  try {
    isSearching.value = true
    lastSearchKeyword.value = keyword
    
    // 构建搜索参数
    const searchParams = {
      keyword: validation.sanitized,
      type: selectedType.value,
      searchType: searchType.value
    }
    
    console.log('执行搜索:', searchParams)
    
    // 发送搜索事件给父组件
    const results = await emit('search', searchParams)
    
    // 更新搜索结果
    if (Array.isArray(results)) {
      searchResults.value = results
    }
    
  } catch (error) {
    console.error('搜索失败:', error)
    ElMessage.error('搜索失败: ' + error.message)
  } finally {
    isSearching.value = false
  }
}

/**
 * 处理文件类型变化
 */
function handleTypeChange(type) {
  selectedType.value = type
  if (searchKeyword.value.trim()) {
    performSearch()
  }
}

/**
 * 获取类型标签文本
 */
function getTypeLabel(type) {
  const option = fileTypeOptions.find(opt => opt.value === type)
  return option ? option.label : '全部'
}

/**
 * 处理搜索类型变化
 */
function handleSearchTypeChange() {
  if (searchKeyword.value.trim()) {
    performSearch()
  }
}

/**
 * 清除搜索结果
 */
function handleClear() {
  searchKeyword.value = ''
  searchResults.value = []
  lastSearchKeyword.value = ''
  emit('clear')
}

/**
 * 清除结果
 */
function clearResults() {
  searchResults.value = []
  lastSearchKeyword.value = ''
  emit('clear')
}

/**
 * 更新搜索结果（供父组件调用）
 */
function updateSearchResults(results) {
  searchResults.value = results || []
}

/**
 * 设置搜索状态（供父组件调用）
 */
function setSearching(status) {
  isSearching.value = status
}

// 暴露方法给父组件
defineExpose({
  performSearch,
  clearResults,
  updateSearchResults,
  setSearching
})
</script>

<style scoped>
.search-component {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.modern-search-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.main-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.modern-search-input {
  flex: 1;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compact-type-select {
  width: 120px;
  flex-shrink: 0;
  border-radius: 12px;
}

.compact-type-select :deep(.el-input__wrapper) {
  border-radius: 12px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  background: rgba(102, 126, 234, 0.05);
  transition: all 0.3s ease;
}

.compact-type-select:hover :deep(.el-input__wrapper) {
  border-color: rgba(102, 126, 234, 0.4);
  background: rgba(102, 126, 234, 0.08);
}

.compact-scope-select {
  width: 100px;
  flex-shrink: 0;
  border-radius: 12px;
  animation: slideInRight 0.3s ease-out;
}

.compact-scope-select :deep(.el-input__wrapper) {
  border-radius: 12px;
  border: 1px solid rgba(102, 126, 234, 0.3);
  background: rgba(102, 126, 234, 0.08);
  transition: all 0.3s ease;
}

.compact-scope-select:hover :deep(.el-input__wrapper) {
  border-color: rgba(102, 126, 234, 0.5);
  background: rgba(102, 126, 234, 0.12);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
    width: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0);
    width: 100px;
  }
}

.modern-search-input:hover {
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.12);
  transform: translateY(-1px);
}

.modern-search-input :deep(.el-input__wrapper) {
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 16px;
  background: #ffffff;
  padding: 12px 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-search-input :deep(.el-input__wrapper:hover) {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.08);
}

.modern-search-input :deep(.el-input__wrapper.is-focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.modern-search-input :deep(.el-input__inner) {
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
}

.search-prefix-icon {
  color: #667eea;
  font-size: 18px;
  margin-right: 8px;
}

/* 移除旧的filters-container样式，现在使用main-search-row */

.modern-type-select,
.modern-scope-select {
  min-width: 100px;
  max-width: 120px;
}

.modern-type-select :deep(.el-input__wrapper),
.modern-scope-select :deep(.el-input__wrapper) {
  border: 1px solid rgba(102, 126, 234, 0.15);
  border-radius: 12px;
  background: rgba(102, 126, 234, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-type-select :deep(.el-input__wrapper:hover),
.modern-scope-select :deep(.el-input__wrapper:hover) {
  border-color: rgba(102, 126, 234, 0.3);
  background: rgba(102, 126, 234, 0.06);
}

.modern-type-select :deep(.el-input__wrapper.is-focus),
.modern-scope-select :deep(.el-input__wrapper.is-focus) {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.08);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.modern-type-select :deep(.el-input__inner),
.modern-scope-select :deep(.el-input__inner) {
  font-size: 14px;
  font-weight: 500;
  color: #667eea;
}

.search-suffix {
  display: flex;
  align-items: center;
  gap: 8px;
}

.type-dropdown {
  border-radius: 12px;
}

.type-button {
  color: #667eea;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  background: rgba(102, 126, 234, 0.05);
  transition: all 0.2s ease;
}

.type-button:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.3);
}

.search-hint {
  color: #a0a0a0;
  margin-right: 4px;
  font-size: 12px;
}


.search-scope {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
  padding: 6px 12px;
  background: rgba(102, 126, 234, 0.04);
  border-radius: 16px;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.scope-radio-group :deep(.el-radio) {
  margin-right: 16px;
}

.scope-radio-group :deep(.el-radio:last-child) {
  margin-right: 0;
}

.scope-radio-group :deep(.el-radio__label) {
  font-size: 12px;
  font-weight: 500;
  color: #667eea;
}

.scope-radio-group :deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #667eea;
  border-color: #667eea;
}

.search-stats {
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 14px;
  margin-top: 12px;
}

.loading-icon {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计和增强的交互效果 */

/* 平板设备优化 */
@media (max-width: 1024px) {
  .search-component {
    max-width: 90%;
  }
  
  .modern-search-container {
    gap: 10px;
  }
  
  .modern-type-select,
  .modern-scope-select {
    min-width: 90px;
    max-width: 110px;
  }
}

@media (max-width: 768px) {
  .search-component {
    max-width: 100%;
    padding: 0 8px;
  }
  
  .modern-search-container {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .main-search-wrapper {
    width: 100%;
  }
  
  .modern-search-input {
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
  }
  
  .modern-search-input:hover {
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
  }
  
  .main-search-row {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  
  .modern-type-select,
  .modern-scope-select {
    min-width: 120px;
    max-width: none;
    flex: 1;
  }
}

@media (max-width: 480px) {
  .search-component {
    padding: 0 4px;
  }
  
  .modern-search-input {
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.12);
  }
  
  .modern-search-input :deep(.el-input__inner) {
    font-size: 14px;
    font-weight: 400;
  }
  
  .modern-search-input :deep(.el-input__wrapper) {
    padding: 10px 16px;
    border-radius: 20px;
  }
  
  .search-prefix-icon {
    font-size: 16px;
    margin-right: 6px;
  }
  
  .main-search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .modern-type-select,
  .modern-scope-select {
    width: 100%;
    max-width: none;
  }
  
  .modern-type-select :deep(.el-input__wrapper),
  .modern-scope-select :deep(.el-input__wrapper) {
    border-radius: 16px;
    padding: 8px 12px;
  }
  
  .search-stats {
    margin-top: 16px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 12px;
  }
}

/* 超小屏设备优化 */
@media (max-width: 320px) {
  .modern-search-input :deep(.el-input__wrapper) {
    padding: 8px 12px;
  }
  
  .search-prefix-icon {
    font-size: 14px;
    margin-right: 4px;
  }
  
  .compact-type-select,
  .compact-scope-select {
    width: 80px;
    font-size: 12px;
  }
  
  .modern-type-select :deep(.el-input__inner),
  .modern-scope-select :deep(.el-input__inner) {
    font-size: 13px;
  }
}

/* 增强的动画和过渡效果 */
.modern-search-container {
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 聚焦时的高级动画 */
.modern-search-input :deep(.el-input__wrapper.is-focus) {
  transform: scale(1.02);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modern-search-input :deep(.el-input__wrapper) {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 筛选器的悬停和激活效果优化 */
.modern-type-select :deep(.el-input__wrapper.is-focus),
.modern-scope-select :deep(.el-input__wrapper.is-focus) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* 搜索结果统计的动画 */
.search-stats {
  animation: fadeInSlide 0.4s ease-out;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
  .modern-search-input :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }
  
  .modern-search-input :deep(.el-input__wrapper:hover) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(102, 126, 234, 0.6);
  }
  
  .modern-search-input :deep(.el-input__wrapper.is-focus) {
    background: rgba(255, 255, 255, 0.15);
    border-color: #667eea;
  }
  
  .compact-type-select :deep(.el-input__wrapper),
  .compact-scope-select :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }
  
  .search-stats {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
  }
}
</style>